<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>😑</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #focusPage2 {
      width: 900px;
      height: 720px;
      position: relative;
    }

    .focusBox {
      background-color: #dd8a8a;
      overflow: hidden;
      margin-top: 20px;
    }

    .focusBox .focusWidget {
      width: 100px;
      height: 100px;
      float: left;
      margin: 10px;
      background-color: #2f04f1;
    }

    .focusBox .dark-focus {
      background-color: rgb(169, 185, 20);
    }

    .focusBox .is-focus {
      background-color: black;
    }
  </style>
</head>

<body>
  <div id="focusPage2">
    <div class="focusSwitch" id="switch2">
      <div class="focusBox" f-cache="auto">
        <div class="focusWidget" id="focus1" f-goright="focus3" onfocus="onFocusEvent(2)"></div>
        <div class="focusWidget" id="focus2" onfocus="onFocusEvent(10)"></div>
        <div class="focusWidget" id="focus3" onfocus="onFocusEvent(5)"></div>
        <div class="focusWidget" id="focus4" onblur="onBlurEvent" onfocus="onFocusEvent(1)"></div>
        <div class="focusWidget" id="focus5" onfocus="onFocusEvent(8)"></div>
        <div class="focusWidget" id="focus6" onfocus="onFocusEvent(6)"></div>
        <div class="focusWidget" id="focus7" onfocus="onFocusEvent(9)"></div>
      </div>
      <div class="focusBox" id="childBox" f-cache="child1"></div>
    </div>
  </div>
</body>
<script src="../focus2.2.js"></script>
<script>
  // var focus2 = new FocusFrame({
  //   focusPageEle: document.getElementById("focusPage2")
  // })
  var framework = new LyFocusFrame("focusPage2");
  function onFocusEvent(ev) {
    var _str = ""
    for (var i = 0; i <= (ev - 1); i++) {
      _str += '<div class="focusWidget" id="child' + i + '"></div>'
    }
    var _dom = document.getElementById("childBox")
    _dom.innerHTML = _str
    setTimeout(function() {
      framework.findSwitch("switch2").initCommonents()
    });
  }
  function onBlurEvent(e){
    console.log(e);
    
  }
</script>

</html>